<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>卡片列表</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/module/admin.css?v=318"/>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #mainPage {
            width: 100%;
            height: auto;
        }

        #mainPage > #top {
            margin: 0 auto;
            width: 1517px;
        }

        #top-div li {
            float: left;
        }

        #top {
            width: 1517px;
            background-color: white;
        }

        #top-div {
            margin: 0 auto;
            height: 80px;
            width: 1170px;
        }

        #top-div-left {
            width: 600px;
            display: inline-block;
        }

        #top-logo {
            width: 80px;
            height: 80px;
            display: inline-block;
            position: relative;
        }

        #top-logo img {
            height: 42px;
            align-content: center;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            margin-left: 20px;
        }

        #top-div-left li {
            padding: 30px 12px;
            font-size: 15px;
            font-weight: 800;
        }

        #top-div-right {
            float: right;
        }

        .goto-login {
            padding: 30px 12px 30px 0;
        }

        .goto-login span {
            font-weight: 800;
            color: #140c40;
            transition: color .3s, background .3s;
            font-size: 12px;
        }

        .goto-login a {
            list-style-type: none;
        }

        #log-reg {
            width: 20px;
            height: 20px;
            margin-top: 27px;
            margin-right: 5px;

        }

        .goto-login img {
            width: 30px;
            height: 30px;
            margin-top: 20px;
        }

        #is-login {
            line-height: 80px;
            cursor: pointer;
        }

        #is-login img {
            width: 35px;
            height: 35px;
        }

        #is-login > div span {
            color: #646e7b;
            font-weight: 600;
            font-size: 20px;
        }

        /** 项目列表样式 */
        .project-list-item {
            background-color: #fff;
            border: 1px solid #e8e8e8;
            border-radius: 4px;
            cursor: pointer;
            transition: all .2s;
        }

        .project-list-item:hover {
            box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
        }

        .project-list-item .project-list-item-cover {
            width: 100%;
            height: 220px;
            display: block;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
        }

        .project-list-item-body {
            padding: 20px;
        }

        .project-list-item .project-list-item-body > h2 {
            font-size: 18px;
            color: #333;
            margin-bottom: 12px;
        }

        .project-list-item .project-list-item-text {
            height: 44px;
            overflow: hidden;
            margin-bottom: 12px;
        }

        .project-list-item .project-list-item-desc {
            position: relative;
        }

        .project-list-item .project-list-item-desc .time {
            color: #999;
            font-size: 12px;
        }

        .project-list-item .project-list-item-desc .ew-head-list {
            position: absolute;
            right: 0;
            top: 0;
        }

        .ew-head-list .ew-head-list-item {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 1px solid #fff;
            margin-left: -10px;
        }

        .ew-head-list .ew-head-list-item:first-child {
            margin-left: 0;
        }

        /** // 项目列表样式结束 */
        .layui-laypage-em {
            background-color: blue !important;
            /*border-radius: 30px;*/
            /*margin: 0 10px;*/
        }

        #searchInfo {
            display: inline-block;
            width: 300px;
            height: 310px;
            margin-top: 2%;
            margin-left: 5%;
            border-radius: .4rem;
            border: 1px solid #e6eaf1;
            background: #fff;
            padding: 25px;
        }

        #searchInfo input {
            border: none;
        }

        #searchInfo button {
            border-radius: 5px;
            margin-top: 18px;
        }

        #searchInfo > form > div {
            height: 75px;
            margin: 0 50px;
        }

        h1 {
            margin: 20px 50px;
        }

        .searchTitle {
            color: #16447d;
            font-weight: 600;
            margin-top: 8px;
            margin-left: 10px;
            margin-bottom: 10px;

        }

        #houseInfo {
            display: inline-block;
            width: 900px;
            border-radius: .4rem;
            overflow: hidden;
        }

        #body {
            display: flex;
        }

        .ew-cascader-dropdown-list, .ew-cascader-dropdown-list-item is-last {
            z-index: 100;
        }

        .layui-card {
            background-color: transparent;
        }
    </style>
</head>
<body>
<div>
    <div id="mainPage">
        <div id="top">
            <div id="top-div">
                <div id="top-logo">
                    <img src="${pageContext.request.contextPath}/static/images/logo.png">
                </div>
                <div id="top-div-left">
                    <ul id="top-ul-left">
                        <li><a href="main.jsp">首页</a></li>
                        <li><a href="houselist.jsp?houseType=8">整租</a></li>
                        <li><a href="houselist.jsp?houseType=9">合租</a></li>
                    </ul>
                </div>
                <div id="top-div-right">
                    <div id="not-login">
                        <ul id="top-ul-right">
                            <li><img id="log-reg"
                                     src="${pageContext.request.contextPath}/static/images/log-reg.png">
                            </li>
                            <li class="goto-login">
                                <a href="login.jsp">
                                    <span>登陆</span>
                                </a>
                            </li>
                            <li class="goto-login">
                                <a href="register.jsp">
                                    <span>注册</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="dropdown-menu" id="is-login">
                        <div>
                            <img style="border-radius: 17px"
                                 src="/images/userimgs/${user.uuidName==null?"1.png":user.uuidName}">
                            <span>${user.userName}</span>
                        </div>
                        <ul class="dropdown-menu-nav">
                            <li><a href="${pageContext.request.contextPath}/backjsp/index.jsp">
                                <i class="layui-icon layui-icon-username"
                                   style="font-size: 20px; color: #555"></i>
                                管理中心</a></li>
                            <li id="login-out"><a>
                                <i class="layui-icon layui-icon-logout"
                                   style="font-size: 20px; color: #555"></i>
                                退出登录
                            </a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div id="body">
            <div id="searchInfo">
                <form class="layui-form">
                    <div style="width: 200px">
                        <p class="searchTitle">租房地址</p>
                        <input style="border: none"
                               name="houseAddress"
                               id="demoCascader11" placeholder="租房地址" class="layui-hide"/>
                    </div>
                    <div style="width: 200px">
                        <p class="searchTitle">租赁方式</p>
                        <select name="houseType" lay-verType="tips" lay-verify="required" required>
                            <option value="">租赁方式</option>
                            <option value="8">整租</option>
                            <option value="9">合租</option>
                        </select>
                    </div>
                    <div style="width: 200px">
                        <p class="searchTitle">租金范围</p>
                        <input type="hidden" name="minPrice" value="0">
                        <select name="maxPrice" lay-verType="tips" lay-verify="required" required>
                            <option value="">租金范围</option>
                            <option value="2000"><2000</option>
                            <option value="3000"><3000</option>
                            <option value="4000"><4000</option>
                            <option value="5000"><5000</option>
                        </select>
                    </div>
                    <div style="width: 200px">
                        <button class="layui-btn layui-btn-warm"
                                lay-filter="searchHouse" lay-submit>
                            <i class="layui-icon layui-icon-search"></i>
                            &emsp;搜索&emsp;
                        </button>
                    </div>

                </form>
            </div>
            <div id="houseInfo">
                <div class="layui-fluid">
                    <div class="layui-card">
                        <div class="layui-tab layui-tab-brief">
                            <div class="layui-tab-content" style="margin-top: -50px">
                                <div class="layui-tab-item layui-show" style="padding-top: 20px;">
                                    <div class="layui-row layui-col-space30" id="houseCardlist"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="houseCard">
    <div class="layui-col-md3 " style="width: 340px;height: 370px;margin: 30px">
        <div class="project-list-item">
            <img class="project-list-item-cover"
                 src="/images/houseimgs/{{d.houseImgs.length==0?1:d.houseImgs[0].houseImg}}"/>
            <div class="project-list-item-body">
                <h2>{{d.houseName}}</h2>
                <div class="project-list-item-text layui-text">{{d.houseAddress}}</div>
                <div class="project-list-item-desc">
                    <span class="time" style="font-size: 20px;color: #f95d02;font-weight: bold">{{d.housePrice}}</span>
                    <span class="time" style="font-size: 15px">/月</span>
                    <div class="ew-head-list">
                        <span class="time">{{d.houseType==8?"整租":"合租"}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/common.js?v=318"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/module/cascader/citys-data.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/jquery/jQuery.js"></script>
<script>
    // 退出登录
    $('#login-out').click(function () {
        parent.layui.admin.confirm('确认退出吗？', function (index) {
            parent.layer.close(index);
            $.ajax({
                url: "${pageContext.request.contextPath}/user/loginOut",
                type: "post",
                dataType: "json",
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg(res.msg, {icon: 1}, function () {
                            parent.location.reload();
                        });
                    } else {
                        layer.msg(res.msg, {icon: 2})
                    }
                }
            });
        });
    });

    <%--根据是否登陆显示隐藏div--%>
    var user = "${user}"
    if (user == "") {
        $("#is-login").hide()
        $("#not-login").show()
    } else {
        $("#not-login").hide()
        $("#is-login").show()
    }
    <%--个人中心弹窗--%>
    layui.use(['form', 'cascader', 'table', 'laydate', 'layer', 'dataGrid', 'element', 'dropdown'], function () {
        var cascader = layui.cascader;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laydate = layui.laydate;
        var dataGrid = layui.dataGrid;

        // 省市区选择
        cascader.render({
            elem: '#demoCascader11',
            data: citysData,
            itemHeight: '250px',
            filterable: true,
            onChange: function (values, data, labels) {
                var c1,//省
                    c2,//市
                    c3 = data.label,
                    c4;
                for (let x of citysData) {
                    if (x.value == values[0]) {
                        c1 = x.label
                        for (let y of x.children) {
                            if (y.value == values[1]) {
                                c2 = y.label
                            }
                        }
                    }
                }
                c4 = c1 + c2 + c3
                $("#demoCascader11").val(c4)
            }
        });
        /* search监听表单提交 */
        form.on('submit(searchHouse)', function (data) {
            $.ajax({
                url: '${pageContext.request.contextPath}/house/getHouseByInfo',
                data: data.field,
                type: "post",
                dataType: "json",
                success: function (res) {
                    dataGrid.render({
                        elem: '#houseCardlist',
                        templet: '#houseCard',
                        data: res.data,
                        page: {limit: 6, limits: [4, 8, 16, 24, 32, 40]}
                    });
                }
            })
            return false;
        });

        var info = window.location.href;
        var index = info.indexOf("?")
        info = info.slice(index) == "p" ? "" : info.slice(index)
        var url = '${pageContext.request.contextPath}/house/getHouseByInfo' + info
        // 项目
        $.get(url, function (res) {
            dataGrid.render({
                elem: '#houseCardlist',
                templet: '#houseCard',
                data: res.data,
                page: {limit: 6, limits: [4, 8, 16, 24, 32, 40]}
            });
        });

        dataGrid.on('item(houseCardlist)', function (obj) {
            var href = "${pageContext.request.contextPath}/jsp/houseinfo.jsp?houseId=" + obj.data.houseId
            window.location.href = href
        });
    });
</script>
</body>
</html>
